<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-area-filter ddp-flex">

  <div class="ddp-type-selectbox ddp-type-search-select " #ddpOffSet
       [ngClass]="{'ddp-del' : searchText !== '', 'ddp-selected' : isShowSelectList && isShowSelectListForOutSide, 'ddp-offset' : viewType === 'widget'}"
       (click)="toggleSelectList($event)">
    <span class="ddp-txt-selectbox">{{viewText}}</span>
    <input type="text" class="ddp-input-selectbox" placeholder="Search" [(ngModel)]="searchText" [disabled]="isMockup"
           (click)="$event.stopPropagation();"
           (keyup)="setViewListPosition(); setCandidatePage(1, true);">
    <a href="javascript:" class="ddp-btn-del" (click)="searchText = ''; setCandidatePage(1, true);"></a>

    <div class="ddp-wrap-popup2 ddp-scroll-none"
         [ngStyle]="(viewType === 'widget') ?  {'position': 'fixed'} : {}">
      <!-- 결과 없음 -->
      <div class="ddp-no-result" *ngIf="pageCandidateList == null || pageCandidateList.length == 0">
        <div class="ddp-wrap-info">
          <div class="ddp-ui-info">
            <em class="ddp-icon-info"></em>
            {{ 'msg.board.filter.ui.search-all' | translate }}
          </div>
        </div>
        <span class="ddp-txt-noresult">{{ 'msg.comm.ui.no.rslt' | translate }}</span>
      </div>
      <!-- //결과 없음 -->

      <div *ngIf="filter.showSelectedItem || (pageCandidateList != null && pageCandidateList.length > 0)">
        <!-- setting -->
        <div (click)="$event.stopPropagation();" class="ddp-select-setting">
          <ul class="ddp-list-select">
            <li *ngIf="isSelectorTypeMulti()"><a href="javascript:" (click)="checkAll();">{{ 'msg.comm.ui.list.sel.all' | translate }}</a></li>
            <li>
              <a href="javascript:" (click)="deselectCandidate();">
                <span *ngIf="isSelectorTypeSingle()">{{ 'msg.comm.ui.list.desel' | translate }}</span>
                <span *ngIf="isSelectorTypeMulti()">{{ 'msg.comm.ui.list.desel.all' | translate }}</span>
              </a>
            </li>
          </ul>
          <span class="ddp-data-total">{{ 'msg.comm.ui.total' | translate }} <strong>{{ totalCount }}</strong></span>
        </div>
        <!-- //setting -->
        <ul class="ddp-list-popup"
            infinite-scroll
            [scrollWindow]="false"
            [infiniteScrollDistance]="5"
            [infiniteScrollThrottle]="150"
            (scrolled)="onScroll()">
          <li *ngFor="let item of pageCandidateList"
              [ngClass]="{'ddp-value-search' : item.isTemporary}">
            <a href="javascript:" *ngIf="isSelectorTypeSingle()" (click)="selectCandidateItem(item);">
              <label class="ddp-label-radio">
                <input type="radio" [checked]="isSelectedItem(item)">
                <i class="ddp-icon-radio"></i>
                <span class="ddp-txt-radio">{{isStringArray ? item : item[viewKey]}}</span>
              </label>
            </a>
            <a href="javascript:" *ngIf="isSelectorTypeMulti()" (click)="$event.stopPropagation();">
              <label class="ddp-label-checkbox">
                <input type="checkbox" (click)="selectCandidateItem(item);"
                       [checked]="isSelectedItem(item)">
                <i class="ddp-icon-checkbox"></i>
                <span class="ddp-txt-checkbox">
                  {{ ( null === item.name || 'null' === item.name ) ? '(Null)' : ( ( '' === item.name || undefined === item.name ) ? '(Empty)' : item.name ) }}
                </span>
              </label>
            </a>
          </li>
        </ul>

        <!-- result2 -->
        <div class="ddp-data-result2">
          <div class="ddp-data-values" >
            <label (click)="$event.stopImmediatePropagation();" class="ddp-label-check-value">
              <input (click)="filter.showSelectedItem = !filter.showSelectedItem;setCandidatePage(1, true);"
                     [checked]="filter.showSelectedItem"
                     type="checkbox" >
              <i></i>
            </label>
            <ng-container *ngIf="filter.showSelectedItem">
              {{ 'msg.board.filter.selected-values' | translate : { value : selectedItems.length } }}
            </ng-container>
            <ng-container *ngIf="!filter.showSelectedItem">
              {{ 'msg.board.filter.all-values' | translate }}
            </ng-container>
          </div>

          <div class="ddp-ui-page">
            <a (click)="$event.stopPropagation();setCandidatePage(currentPage-1);"
               [class.ddp-disabled]="1 === currentPage"
               href="javascript:" class="ddp-btn-prev"></a>
            <span class="ddp-data-page"><em>{{currentPage}}</em>/<em>{{lastPage}}</em></span>
            <a (click)="$event.stopPropagation();setCandidatePage(currentPage+1);"
               [class.ddp-disabled]="lastPage === currentPage"
               href="javascript:" class="ddp-btn-next"></a>
          </div>
        </div>
        <!-- //result2 -->
      </div>
    </div>
  </div>

  <!-- //select box -->
  <a (click)="candidateFromSearchText()" class="ddp-btn-line"
     [ngStyle]="(viewType === 'widget' && '' !== searchText && isShowSelectList) ?  {'display': 'block'} : {'display': 'none'}">
    {{'msg.comm.ui.search-all' | translate}}
  </a>
</div>
